import React, { useState } from 'react';
import './index.css';

interface CalendarProps{
  defaultValue?: Date;
  onChange?: (date: Date) => void;
}
function Calendar(props: CalendarProps) {
  // 组件也需考虑受控与非受控
  // 更加偏向于受控，这里的初始状态是父组件提供，状态的修改是组件内部提供，更加偏向于非受控
  const {
    defaultValue = new Date(),
    onChange
  } = props;

  const [value, setValue] = useState(defaultValue);

  function changeValue(date: Date) {
    setValue(date);
    onChange?.(date);
  } 


  return <div>
    {value.toLocaleDateString()}
    <div onClick={()=> {changeValue(new Date('2024-5-1'))}}>2023-5-1</div>
    <div onClick={()=> {changeValue(new Date('2024-5-2'))}}>2023-5-2</div>
    <div onClick={()=> {changeValue(new Date('2024-5-3'))}}>2023-5-3</div>
  </div>
}

function App() {
    return <Calendar defaultValue={new Date('2024-5-1')} onChange={(date) => {
        console.log(date.toLocaleDateString());
    }}/>
}

export default App;
